<template>
  <basic-dialog
    :visible="dialogVisible"
    :title="'价格走势明细'"
    :show-footer="false"
    :width="'60%'"
    :handleClose="handleCloseDialog"
  >
    <basic-table
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :tableHeight="480"
      :showSelectCol="false"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    >
      <div slot="content_context">
        <el-button
          v-if="showBtn('导出')"
          type="primary"
          size="mini"
          icon="el-icon-download"
          :loading="exportLoading"
          :disabled="!this.tableInfo.list.length"
          @click="exportPriceLog"
        >导出</el-button
        >
      </div>
    </basic-table>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/BasicTable';
import basePage from '@/mixins/commodity/basePage';
import { PRICE_MOVEMENTS_COLUMNS } from '../constants'
import { createExcelByExport } from '@/utils/bizUtils';
import { queryMaterialPriceChartLogService, exportMaterialPriceChartLogService } from '@/api/finance/rawMaterialManage/rawMaterial';

export default {
  name: 'SelectSpuDialog',
  mixins: [basePage],
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    chartsInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      queryData: {},
      tableInfo: {
        list: [],
        columns: PRICE_MOVEMENTS_COLUMNS,
        loading: false
      }
    };
  },

  computed: {
    dialogVisible (val) {
      return this.visible;
    }
  },
  watch: {
    chartsInfo: {
      handler (val) {
        this.queryData = val;
        this.getTableData()
      }
    }
  },
  methods: {
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    // 获取表格数据
    async getTableData () {
      const { retData } = await queryMaterialPriceChartLogService(
        { ...this.queryData, ...this.paginationParams },
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      }
    },
    // 导出信息数据
    async exportPriceLog () {
      const res = await exportMaterialPriceChartLogService(
        { ...this.queryData },
        state => { this.exportLoading = state; }
      );
      createExcelByExport({ res, excelTitle: '原材料价格走势明细' });
    },
  }
};
</script>
